<!--右下广告--JQ版(渐变消失)-->
<!--需要jq.js支持-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>右下广告--JQ版(渐变消失)</title>
		<script src="jq/jquery.js" type="text/javascript"></script>
		<style type="text/css">
			@keyframes move{
				from{}
				33%{top:90%}
				66%{top:80%}
				to{top:70%}
			}
			#box{
				animation:move 3s linear 1s forwards;
				/*animation: move 3s linear .5s  2 alternate ;*/
				/*动画名  执行时间  运行方式  触发时间  执行次数  是否往复*/
				background: greenyellow;
				width:200px;
				height: 200px;
				position: fixed;
				top:100%;
				left:85%
			}
		</style>
	</head> 
	<body>
		<div id="box">这里放广告</div>
	</body>
	<script type="text/javascript">
		//5秒后关闭 广告加上动画触发的3秒
		setTimeout(function(){
		   $("#box").fadeOut(2000);//2秒后淡出
		},8000)
	</script>
</html>